<template>
  <div class="myHome bg">
    <div class="myTop">
      <img src="../../assets/images/pic1.jpg" alt="" srcset="">
      <span>{{nickName}}</span>
    </div>
    <van-row class="cell_h">
      <van-col span="16"><span>找不到订单和优惠券</span></van-col>
      <van-col span="8">
        <van-button plain hairline class="btn_h" type="danger">绑定公众号</van-button>
      </van-col>
    </van-row>
    <div class="bgHight"></div>
    <div class="myBottom">
      <van-cell title="商城订单" border is-link value="查看全部订单"  @click="goOrder('all')"/>
      <ul class="order">
        <li @click="goOrder('dfk')">
          <img src="../../assets/images/dfk.png" alt="" srcset="">
          <span>待付款</span>
        </li>
        <li  @click="goOrder('dfh')">
           <img src="../../assets/images/dfh.png" alt="" srcset="">
          <span>待发货</span>
        </li>
        <li  @click="goOrder('dsh')">
          <img src="../../assets/images/dsh.png" alt="" srcset="">
          <span>待收货</span>
        </li>
        <li  @click="goOrder('dpj')">
          <img src="../../assets/images/dpj.png" alt="" srcset="">
          <span>待评价</span>
        </li>
        <li  @click="goOrder('tk')">
          <img src="../../assets/images/tk.png" alt="" srcset="">
          <span>退款</span>
        </li>
      </ul>
    </div>
   <div class="clear"></div>
   <van-cell title="我的地址" icon="location-o" is-link />
   <van-cell title="我的优惠券" icon="balance-pay" is-link />
  </div>
</template>

<script>
export default {
  data() {
    return {
      nickName: "qsh"
    }
  },
  methods: {
    goOrder(name){
      this.$router.push({path:"/my/order",query:{name:name}})
    }
  }
};
</script>

<style lang="scss" scoped>
.myHome {
  .cell_h {
    background: #ffffff;
    height: 40px;
    line-height: 40px;
    padding: 0px 5px;
    span {
      font-size: 12px;
    }
    .btn_h {
      height: 30px;
      line-height: 30px;
      float: right;
      margin-top: 5px;
    }
  }
  .bgHight {
    height: 10px;
    background: #eeeeee;
  }
  .myTop {
    height: 100px;
    text-align: center;
    background: #ffffff;
    // width: 96%;
    margin: 0px auto;
    border-bottom: 1px solid #eeeeee;
    span {
      font-size: 16px;
    }
    img {
      width: 60px;
      height: 60px;
      margin: 40px auto 5px auto;
      border-radius: 50%;
      display: block;
    }
  }
  .myBottom {
    // margin-top: 20px;
    .order {
      width: 100%;
      display: inline-block;
      background: #ffffff;
      padding: 10px 0px;
      li {
        float: left;
        width: 20%;
        text-align: center;
        img{
          width: 30px;
          height: 30px;
          display: block;
          margin: auto;
        }
      }
    }
  }
}
</style>
